<template>
  <div class="dashboard-editor-container">
    <!-- 添加弹窗 -->
    <el-dialog
      title="松原市前郭县住宅专项维修资金应用展示"
      :visible.sync="showBoundary"
      width="80%"
      :before-close="handleCloseBoundary"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :fullscreen="isFullscreen"
      @keyup.esc.native="exitFullscreen"
    >
      <el-button type="primary" @click="toggleFullscreen" style="position: absolute; top: 10px; right: 50px;">
        {{ isFullscreen ? '退出全屏' : '全屏' }}
      </el-button>
      <songyuan-boundary />
    </el-dialog>

    <panel-group :count01="countList.count01"
                 :count02="countList.count02"
                 :count03="countList.count03"
                 :count04="countList.count04"
                 :count05="countList.count05"
                 :count06="countList.count06"
                 :count07="countList.count07"
                 :count08="countList.count08"
                 @handleSetLineChartData="handleSetLineChartData"
    />


    <el-row :gutter="32">
              <el-col :xs="24" :sm="24" :lg="60">
                <div class="app-container">
                  <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
                        <el-form-item label="开始时间" prop="startDate">
                          <el-date-picker clearable size="small"
                            v-model="queryParams.startDate"
                            type="date"
                            value-format="yyyyMMdd"
                            placeholder="选择开始时间">
                          </el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束时间" prop="endDate">
                          <el-date-picker clearable size="small"
                            v-model="queryParams.endDate"
                            type="date"
                            value-format="yyyyMMdd"
                            placeholder="选择结束时间">
                          </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary" icon="el-icon-search" size="mini" @click="dayQuery">按天搜索</el-button>
                          <el-button type="primary" icon="el-icon-search" size="mini" @click="monthQuery">按月搜索</el-button>
                          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        </el-form-item>
                      </el-form>

                      <div class="dashboard-editor-container">

                        <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
                          <bar-chart v-if ="bar" :monthData="monthData" :monthTypeData="monthTypeData" :monthPayData="monthPayData" style="height:400px"/>
                          <line-chart v-if ="line" :dayData="dayData" :dayTypeData="dayTypeData" :dayPayData="dayPayData" style="height:400px"/>
                        </el-row>
                      </div>
                </div>
              </el-col>

            </el-row>


  </div>



</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import {getIndexSelectBoxCount01} from "@/api/index/index";
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import { getDayChart,getMonthChart } from "@/api/report/fundGraph";
import SongyuanBoundary from '@/views/report/fundUsage/songyuanBoundary.vue'; // 导入弹窗组件

export default {
  name: "index",
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    BarChart,
    SongyuanBoundary // 注册弹窗组件
  },
  data() {
    return {
      showBoundary: true, // 控制弹窗显示
      isFullscreen: false, // 控制全屏状态
      /** 当前配置信息 */
      config: {},
      /** 面板组，该用户配置的计数列表 */
      countList: {
        count01: null,
        count02: null,
        count03: null,
        count04: null,
        count05: null,
        count06: null,
        count07: null,
        count08: null,
      },
      // 该用户选择的面板组（数组）
      selected: null,

      bar:false,
      line:false,
      dayData:[],
      dayTypeData:[],
      dayPayData:[],
      monthData:[],
      monthTypeData:[],
      monthPayData:[],
      queryParams: {},
      showSearch: true


    }
  },
  created() {
    this.getList();
    this.monthQuery();
  },
  methods: {
    handleCloseBoundary() {
      this.showBoundary = false; // 关闭弹窗
    },
    toggleFullscreen() {
      this.isFullscreen = !this.isFullscreen;
    },
    exitFullscreen() {
      if (this.isFullscreen) {
        this.isFullscreen = false;
      }
    },
    getList() {
      debugger
      getIndexSelectBoxCount01().then(response => {
        this.countList.count01 = parseFloat(response.data.doorSum);
        this.countList.count02 = parseFloat(response.data.costMoneySum);
        this.countList.count03 = parseFloat(response.data.unpaidSum);
        this.countList.count04 = parseFloat(response.data.repairSum);
        this.countList.count05 = parseFloat(response.data.budgetMoney);
        this.countList.count06 = parseFloat(response.data.costMoney);
        this.countList.count07 = parseFloat(response.data.unpaidMoney);
        this.countList.count08 = parseFloat(response.data.repairMoney);
      });
    },
    handleSetLineChartData(type) {
      this.lineChartData = type
    },

    resetQuery() {
          this.resetForm("queryForm");
          this.monthQuery();
        },
        dayQuery(){
          this.bar = false
          this.line = false
          this.dayData = []
          this.dayTypeData = []
          this.dayPayData = []
          getDayChart(this.queryParams).then(response => {
            response.rows.forEach(e => {
              this.dayData.push(e.costMoney)
              this.dayTypeData.push(e.abscissa)
              this.dayPayData.push(e.payMoney)
            })
            this.bar = false
            this.line = true
          })
        },
        monthQuery(){
          this.bar = false
          this.line = false
          this.monthData = []
          this.monthTypeData = []
          this.monthPayData = []
          debugger
          getMonthChart(this.queryParams).then(response => {
            response.rows.forEach(e => {
              this.monthData.push(e.costMoney)
              this.monthTypeData.push(e.abscissa)
              this.monthPayData.push(e.payMoney)
            })
            this.bar = true
            this.line = false
          })
        }

  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
